<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Electrolux</title>
  <link rel="stylesheet" href="../../index.css" />

  <style>
    
html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
    'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  height: 100vh;
}

body * {
  box-sizing: border-box;
  flex-shrink: 0;
}
*{
  margin:0px;
  padding:0px;
}
.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.relative {
  position: relative;
}
    .fix-bottom {
      position: fixed;
      bottom: 0vh;
      width: 100%;
      /* height: 100px; */
    }

    .page {
      background-color: #252c32;
      width: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      /* height: 300%; */

      min-height: 100%
    }

    .header {
      padding: 2.102vh 2.553vh 1.502vh;
      height: 6.607vh;
    }

    /* .image {
      width: 3.003vh;
      height: 3.003vh;
    } */

    .font_1 {
      font-size: 2.102vh;
      font-family: SourceHanSansCN;
      line-height: 1.952vh;
      font-weight: 700;
      color: #ffffff;
    }

    .group {
      overflow-y: auto;
    }

    .container>*:not(:first-child) {
      margin-top: 8.595vh;
    }

    .section {
      margin: 0 2.553vh;
      padding: 2.703vh 2.402vh;
      background-color: #2f383f;
      border-radius: 0.901vh;
      box-shadow: 0px 1.652vh 2.402vh -1.351vh #00000085;
    }

    .space>*:not(:first-child) {
      margin-top: 5.105vh;
    }

    .space-y-6>*:not(:first-child) {
      margin-top: 0.901vh;
    }

    .text {
      line-height: 2.027vh;
    }

    .font_2 {
      font-size: 1.802vh;
      font-family: SourceHanSansCN;
      line-height: 1.652vh;
      color: #ffffff;
    }

    .space-x-10>*:not(:first-child) {
      margin-left: 1.502vh;
    }

    .space-x-19>*:not(:first-child) {
      margin-left: 2.853vh;
    }

    .space-x-4>*:not(:first-child) {
      margin-left: 0.601vh;
    }

    .section_green {
      background-color: #0bd400;
      border-radius: 50%;
      width: 1.502vh;
      height: 1.502vh;
    }

    .section_red {
      background-color: #ff0404;
      border-radius: 50%;
      width: 1.502vh;
      height: 1.502vh;
    }

    .section_3 {
      padding: 2.703vh 2.553vh 3.153vh;
      background-color: #1e252b;
    }

    .space-y-18>*:not(:first-child) {
      margin-top: 2.703vh;
    }

    .group_2 {
      padding-left: 8.408vh;
      padding-right: 7.808vh;
    }

    .font_3 {
      font-size: 1.802vh;
      font-family: SourceHanSansCN;
      line-height: 1.652vh;
      font-weight: 700;
      color: #ffffff;
    }

    .text_2 {
      line-height: 1.727vh;
    }

    .text_3 {
      line-height: 1.727vh;
    }

    .space-y-12>*:not(:first-child) {
      margin-top: 1.802vh;
    }

    .button {
      padding: 2.402vh 0;
      background-color: #0044ff;
      border-radius: 1.351vh;
    }

    .button_2 {
      padding: 2.402vh 0;
      background-color: #284447;
      border-radius: 1.351vh;
    }

    .text_4 {
      line-height: 1.727vh;
    }

    .image {
      /* width: 16.67px;
      height: 14.67px; */
      /* background: white; */
      /* width: 20px;
      height: 20px; */
    }
  </style>
</head>

<body>
  <div class="flex-col page">
    <div class="flex-row justify-between items-center header">
      <img class="image" src="../../img/left_top_icon.png" />
      <span class="font_1">本日测试项目</span>
      <img class="image" src="../../img/right_top_icon.png" />
    </div>
    <div class="flex-col flex-auto group container">
      <div class="flex-col section space">
        <div class="flex-col items-start space-y-6">
          <span class="font_1 text">联调入库测试</span>
          <span class="font_2">测试时间：2:36</span>
        </div>
        <div class="flex-row justify-center space-x-10">
          <span class="font_2">任务耗时: 2:01秒</span>
          <span class="font_2">AGV速度: 0.3s</span>
        </div>
        <div class="flex-row space-x-19">
          <div class="flex-row space-x-4">
            <div class="shrink-0 section_green"></div>
            <span class="font_2">测试成功</span>
          </div>
          <span class="font_2">测试编号： 01</span>
        </div>
      </div>
      <div class="flex-col section space">
        <div class="flex-col items-start space-y-6">
          <span class="font_1 text">联调入库测试</span>
          <span class="font_2">测试时间：2:36</span>
        </div>
        <div class="flex-row justify-center space-x-10">
          <span class="font_2">任务耗时: 2:01秒</span>
          <span class="font_2">AGV速度: 0.3s</span>
        </div>
        <div class="flex-row space-x-19">
          <div class="flex-row space-x-4">
            <div class="shrink-0 section_red"></div>
            <span class="font_2">测试失败</span>
          </div>
          <span class="font_2">测试编号： 01</span>
        </div>
      </div>
      <div class="flex-col section space">
        <div class="flex-col items-start space-y-6">
          <span class="font_1 text">联调入库测试</span>
          <span class="font_2">测试时间：2:36</span>
        </div>
        <div class="flex-row justify-center space-x-10">
          <span class="font_2">任务耗时: 2:01秒</span>
          <span class="font_2">AGV速度: 0.3s</span>
        </div>
        <div class="flex-row space-x-19">
          <div class="flex-row space-x-4">
            <div class="shrink-0 section_red"></div>
            <span class="font_2">测试失败</span>
          </div>
          <span class="font_2">测试编号： 01</span>
        </div>
      </div>
      <!-- 重要 -->
      <div class="flex-col section space">
        <div class="flex-col items-start space-y-6">
          <span class="font_1 text">联调入库测试</span>
          <span class="font_2">测试时间：2:36</span>
        </div>
        <div class="flex-row justify-center space-x-10">
          <span class="font_2">任务耗时: 2:01秒</span>
          <span class="font_2">AGV速度: 0.3s</span>
        </div>
        <div class="flex-row space-x-19">
          <div class="flex-row space-x-4">
            <div class="shrink-0 section_red"></div>
            <span class="font_2">测试失败</span>
          </div>
          <span class="font_2">测试编号： 01</span>
        </div>
      </div>

      <div class=" section_3 space-y-18 fix-bottom">
        <div class="flex-row justify-evenly group_2">
          <span class="font_3 text_2">测试成功次数:0</span>
          <span class="font_3 text_3">测试失败次数：0</span>
        </div>
        <div class="flex-col space-y-12">
          <div class="flex-col justify-start items-center button"><span class="font_2">开始新的测试</span></div>
          <div class="flex-col justify-start items-center button_2">
            <span class="font_3 text_4">查看往期测试记录</span>
          </div>
        </div>
      </div>
    </div>

  </div>
</body>

</html>